<script lang="ts" setup>
import { Tooltip } from 'ant-design-vue'
import { menuTypeList } from '../enum'
import { useDesign } from '@/hooks/web/useDesign'

defineOptions({ name: 'MenuTypePicker' })

defineProps({
  menuTypeList: {
    type: Array as PropType<typeof menuTypeList>,
    default: () => [],
  },
  handler: {
    type: Function as PropType<Fn>,
    default: () => ({}),
  },
  def: {
    type: String,
    default: '',
  },
})
const { prefixCls } = useDesign('setting-menu-type-picker')
</script>

<template>
  <div :class="prefixCls">
    <template v-for="item in menuTypeList || []" :key="item.title">
      <Tooltip :title="item.title" placement="bottom">
        <div
          :class="[
            `${prefixCls}__item`,
            `${prefixCls}__item--${item.type}`,
            {
              [`${prefixCls}__item--active`]: def === item.type,
            },
          ]"
          @click="handler(item)"
        >
          <div class="mix-sidebar" />
        </div>
      </Tooltip>
    </template>
  </div>
</template>

<style lang="less" scoped>
@prefix-cls: ~'@{namespace}-setting-menu-type-picker';

.@{prefix-cls} {
  display: flex;

  &__item {
    position: relative;
    width: 56px;
    height: 48px;
    margin-right: 16px;
    overflow: hidden;
    cursor: pointer;
    background-color: #f0f2f5;
    border-radius: 4px;
    box-shadow: 0 1px 2.5px 0 rgb(0 0 0 / 18%);

    &::before,
    &::after {
      position: absolute;
      content: '';
    }

    &--sidebar,
    &--light {
      &::before {
        top: 0;
        left: 0;
        z-index: 1;
        width: 33%;
        height: 100%;
        background-color: #273352;
        border-radius: 4px 0 0 4px;
      }

      &::after {
        top: 0;
        left: 0;
        width: 100%;
        height: 25%;
        background-color: #fff;
      }
    }

    &--mix {
      &::before {
        top: 0;
        left: 0;
        width: 33%;
        height: 100%;
        background-color: #fff;
        border-radius: 4px 0 0 4px;
      }

      &::after {
        top: 0;
        left: 0;
        z-index: 1;
        width: 100%;
        height: 25%;
        background-color: #273352;
      }
    }

    &--top-menu {
      &::after {
        top: 0;
        left: 0;
        width: 100%;
        height: 25%;
        background-color: #273352;
      }
    }

    &--dark {
      background-color: #273352;
    }

    &--mix-sidebar {
      &::before {
        top: 0;
        left: 0;
        z-index: 1;
        width: 25%;
        height: 100%;
        background-color: #273352;
        border-radius: 4px 0 0 4px;
      }

      &::after {
        top: 0;
        left: 0;
        width: 100%;
        height: 25%;
        background-color: #fff;
      }

      .mix-sidebar {
        position: absolute;
        left: 25%;
        width: 15%;
        height: 100%;
        background-color: #fff;
      }
    }

    &:hover,
    &--active {
      padding: 12px;

      &::before,
      &::after {
        border-radius: 0;
      }
    }
  }

  img {
    width: 100%;
    height: 100%;
    cursor: pointer;
  }
}
</style>
